<template>
  <div class="wrapper">
    <Chart
      id="reserveMoney"
      style="width: 100%; height: 300px"
      :option="option"
    ></Chart>
  </div>
</template>
  
<script>
import Chart from "@/components/chart/chart.vue";
import { getChartData } from "@/api/echarts";
export default {
  name: "reserveMoney",
  components: { Chart },
  props: [],
  data() {
    return {
      chartData: null,
      option: {
        id: "reserveMoney",
        // title:"备用金余额",
      },
      xData: [],
    };
  },
  watch: {
    chartData: {
      handler(newValue, oldValue) {
        if (this.chartData) {
          this.setOption();
        }
      },
      deep: true,
    },
  },
  mounted() {
    getChartData({ custom_chart_id: "26" }).then((res) => {
      const data = res.data.data;
      // data.sort(function (a, b) {
      //   return a.balance - b.balance;
      // });
      // data.forEach((item) => {
      //   item.value = item.balance * 1;
      //   item.name = item.branch_id_name;
      //   item.score = item.balance / data[data.length - 1].balance;
      // });
      this.xData = data.map((item) => item.branch_id_name);
      this.chartData = data.map((item) => {
        if (item.balance < 0) {
          return {
            value: item.balance * 1,
            itemStyle: {
              color: "#a90000",
            },
          };
        } else {
          return item.balance * 1;
        }
      });
      // this.chartData.unshift(["score", "value", "name"]);
      // console.log(this.chartData, "26");
    });
  },
  methods: {
    setOption() {
      this.option = {
        xAxis: {
          type: "category",
          data: this.xData,
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        series: [
          {
            data: this.chartData,
            type: "bar",
            label: {
              show: true,
              precision: 1,
              position: "top",
              valueAnimation: true,
              fontFamily: "monospace",
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>
  